<div class="flex flex-col space-y-6 p-4">
  <table class="min-w-full table-auto border-collapse custom-table">
    <thead>
    <tr>
      <th class="px-4 py-1.5 text-left font-semibold text-gray-300">Book Field</th>
      <th class="px-4 py-1.5 text-left font-semibold text-gray-300">4th Priority</th>
      <th class="px-4 py-1.5 text-left font-semibold text-gray-300">3rd Priority</th>
      <th class="px-4 py-1.5 text-left font-semibold text-gray-300">2nd Priority</th>
      <th class="px-4 py-1.5 text-left font-semibold text-gray-300">1st Priority</th>
    </tr>
    </thead>
    <tbody>

    <tr>
      <td class="text-sm px-4 py-1.5 text-gray-300">All Other Fields</td>
      <td class="px-4 py-1.5">
        <p-select [options]="providers" [(ngModel)]="allP4.value"
                  (onChange)="syncProvider($event, 'p4')"
                  placeholder="Select All" appendTo="body"
                  class="w-full" size="small">
        </p-select>
      </td>
      <td class="px-4 py-1.5">
        <p-select [options]="providers" [(ngModel)]="allP3.value"
                  (onChange)="syncProvider($event, 'p3')"
                  placeholder="Select All" appendTo="body"
                  class="w-full" size="small">
        </p-select>
      </td>
      <td class="px-4 py-1.5">
        <p-select [options]="providers" [(ngModel)]="allP2.value"
                  (onChange)="syncProvider($event, 'p2')"
                  placeholder="Select All" appendTo="body"
                  class="w-full" size="small">
        </p-select>
      </td>
      <td class="px-4 py-1.5">
        <p-select [options]="providers" [(ngModel)]="allP1.value"
                  (onChange)="syncProvider($event, 'p1')"
                  placeholder="Select All" appendTo="body"
                  class="w-full" size="small">
        </p-select>
      </td>
    </tr>

      @for (field of fields; track field) {
        <tr [hidden]="field === 'cover' && !refreshCovers">
          <td class="text-sm px-4 py-1.5 text-gray-300">{{ formatLabel(field) }}</td>
          <td class="px-4 py-1.5">
            <p-select [options]="providers" [(ngModel)]="fieldOptions[field].p4"
                      placeholder="Unset" appendTo="body"
                      class="w-full" size="small">
            </p-select>
          </td>
          <td class="px-4 py-1.5">
            <p-select [options]="providers" [(ngModel)]="fieldOptions[field].p3"
                      placeholder="Unset" appendTo="body"
                      class="w-full" size="small">
            </p-select>
          </td>
          <td class="px-4 py-1.5">
            <p-select [options]="providers" [(ngModel)]="fieldOptions[field].p2"
                      placeholder="Unset" appendTo="body"
                      class="w-full" size="small">
            </p-select>
          </td>
          <td class="px-4 py-1.5">
            <p-select [options]="providers" [(ngModel)]="fieldOptions[field].p1"
                      placeholder="Unset" appendTo="body"
                      class="w-full" size="small">
            </p-select>
          </td>
        </tr>
      }
    </tbody>
  </table>


  <div class="flex flex-row items-center justify-between gap-4 w-full">

    <div class="flex flex-row gap-10">
      <div class="flex flex-row items-center gap-4">
        <p pTooltip="Fetch and update new book cover images" tooltipPosition="top">Update covers:</p>
        <p-checkbox [(ngModel)]="refreshCovers" [binary]="true"></p-checkbox>
      </div>
      <div class="flex flex-row items-center gap-4">
        <p pTooltip="Combine new genres with existing ones" tooltipPosition="top">Merge genres:</p>
        <p-checkbox [(ngModel)]="mergeCategories" [binary]="true"></p-checkbox>
      </div>
      <div class="flex flex-row items-center gap-4">
        <p pTooltip="Review and approve metadata changes before saving" tooltipPosition="top">Manual review:</p>
        <p-checkbox [(ngModel)]="reviewBeforeApply" [binary]="true"></p-checkbox>
      </div>
    </div>

    <div class="flex flex-row gap-6">
      <p-button severity="warn" outlined="true" label="Reset Form" (onClick)="reset()"></p-button>
      <p-button [label]="submitButtonLabel" severity="success" icon="pi pi-save" outlined="true" (onClick)="submit()"></p-button>
    </div>
  </div>

</div>
